<template>
	<view class="task">
		<uni-nav-bar leftIcon="back" @clickLeft="tolastPage" :statusBar="true" shadow :fixed="true" title="任务管理" color="#101010"
            backgroundColor="#fff"></uni-nav-bar>
		<!-- <view class="navigationBar" style="background: url('../../static/imgs/headbg.png')">
			<tui-icon name="arrowleft" color="#ffffff" :size="50" class="navIcon" @click="tolastPage"></tui-icon>
			<view class="navText">任务管理</view>
		</view> -->
		<!-- <view class="table">
			<view :class="activeTab == '' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('')">全部({{sum}})</view>
			<view :class="activeTab == '0' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('0')">未完成({{wwc}})</view>
			<view :class="activeTab == '1' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('1')">已完成({{ywc}})</view>
			<view :class="activeTab == '2' ? 'tableList tableListColor' : 'tableList'" @click="obtainConten('2')">待接收({{djs}})</view>
		</view> -->
		<scroll-view @scrolltolower="loadMoreData" scroll-y class="content">
			<view class="contentList" v-for="item in dataList" @click="toDetails(item.id)">
				<view class="contentListTop">
					<view class="contentListtitle">
					{{item.eventName}}
					</view>
					<view class="contentListstate">
						<span style="background: #d9001b;" v-if="item.eventStatus == '0'">待接收</span>
						<span style="background: #fe7a21;" v-else-if="item.eventStatus == '1'">待完成</span>
						<span style="background: #137a29;" v-else-if="item.eventStatus == '2'">已完成</span>
						<span style="background: #5425a2;" v-else-if="item.eventStatus == '3'">已驳回</span>
						<span style="background: #5425a2;" v-else>其他</span>
					</view>
				</view>
				<view class="contentListTime">
					事发时间：{{item.eventTime}}
				</view>
			</view>
			<view class="contentNull" v-if="dataList.length == 0" >暂无数据</view>
			<view class="contentOut" v-if="dataList.length != 0 && contentOut">已经到底了</view>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState, mapGetters, mapMutations} from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				activeTab:'',
				size:'10',
				currentt:'1',
				pages:'',
				dataList:[],
				contentOut:false,
			};
		},
		computed: {
			...mapGetters(['tabBar', "hasLogin"]),
			...mapState(["userInfo"]),
		},
		onLoad() {},
		onUnload() {},
		onShow() {
			this.getDataList()
		},
		
		methods: {
			getDataList(status){
				let data = {
					size:this.size,
					current: this.currentt
				}
				if(this.userInfo.roleCode != 'mj'){
					data.adminId = this.userInfo.id
				}else{
					data.createId = this.userInfo.id
				}
				this.$apis.getIndexLIst(data).then(res =>{
					if(res.code == '20000'){
						if(this.currentt == 1){
							this.dataList = res.data.page.records.filter(i=>i.eventStatus!=3);
							this.pages = res.data.page.pages
						}else{
							res.data.page.records.map(item =>{
								this.dataList.push(item)
							})
						}
					}
				})
			},
			tolastPage(){
				wx.navigateBack({
				  delta: 1 
				})
			},
			obtainConten(text){
				this.activeTab = text
				this.getDataList(text)
			},
			// 任务详情
			toDetails(id){
				wx.navigateTo({
				  url: '/pages/threeTerminal/details?id=' + id
				})
			},
			// 触底滚动
			loadMoreData(){
				this.currentt++
				if(this.pages >= this.currentt){
					this.getDataList()
				}else{
					this.dataList.length != 0 && (this.contentOut = true)
				}
			}
		}
	}
</script>

<style lang="scss">
.contentNull{text-align: center; margin-top: 40%; color: #333333; font-size: 32rpx;}
	.task{height: 100vh;}
	.navigationBar{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 180rpx; background-size: 100% 100%;
		.navIcon{position: absolute; left: 0;}
		.navText{font-size: 45rpx;}
	}
	.searchFor{padding: 0 50rpx; margin: 20rpx 0; display: flex; align-items: center; justify-content: space-between;
		.searchInput{border: 1rpx solid #aaaaaa; border-radius: 50rpx; height:85rpx; width: calc(100% - 120rpx); padding-left: 20rpx;}
		span{font-size: 37rpx;}
	}
	.table{display: flex; align-items: center; padding: 15rpx 40rpx;
		.tableListColor{color: #0000FF;}
		.tableList{width: 25%; font-size: 30rpx; text-align: center;}
	}
	.content{ padding: 0 20rpx; height: calc(100% - 68px); overflow-y: auto;
		.contentList{ margin-top: 30rpx; padding: 30rpx 30rpx; border:1rpx solid rgba(149, 156, 166, 0.2); border-radius: 10rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
		.contentOut{margin: 50rpx 0 30rpx 0; text-align: center; color: #333333; font-size: 32rpx;}
	}
</style>